<template>
  <div>
    <h1>会员修改</h1>
    {{ info }}
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">会员编号</td>
          <td><input type="text" v-model="info.memberCode" disabled /></td>
        </tr>
        <tr>
          <td align="right">手机号</td>
          <td><input type="text" v-model="info.tel" maxlength="11" /></td>
        </tr>
        <tr>
          <td align="right">姓名</td>
          <td><input type="text" v-model="info.userName" /></td>
        </tr>
        <tr>
          <td align="right">证件类型</td>
          <td>
            <select v-model="info.cardType">
              <option value="">请选择</option>
              <option :value="item" v-for="item in arr">{{ item }}</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">证件号码</td>
          <td>
            <input type="text" v-model="info.card" maxlength="18" />
          </td>
        </tr>
        <tr>
          <td align="right">会员生日</td>
          <td><input type="date" v-model="info.birthDay" /></td>
        </tr>
        <tr>
          <td align="right">会员积分</td>
          <td><input type="text" v-model="info.score" /></td>
        </tr>
        <tr>
          <td align="right">会员余额</td>
          <td><input type="text" v-model="info.money" /></td>
        </tr>
        <tr>
          <td align="right">会员等级</td>
          <td>
            <select v-model="info.levelId">
              <option value="">请选择</option>
              <option :value="item.id" v-for="item in levelList">
                {{ item.levelName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">会员性别</td>
          <td>
            <input
              type="radio"
              name="gender"
              :value="1"
              v-model="info.gender"
            />
            男<input
              name="gender"
              type="radio"
              :value="0"
              v-model="info.gender"
            />女
          </td>
        </tr>
        <tr>
          <td align="right">会员爱好</td>
          <td>
            <input
              type="checkbox"
              name="likes"
              v-model="info.likes"
              value="吃"
            />吃
            <input
              type="checkbox"
              name="likes"
              v-model="info.likes"
              value="喝"
            />喝
            <input
              type="checkbox"
              name="likes"
              v-model="info.likes"
              value="嫖"
            />嫖
            <input
              type="checkbox"
              name="likes"
              v-model="info.likes"
              value="赌"
            />赌
            <input
              type="checkbox"
              name="likes"
              v-model="info.likes"
              value="抽"
            />抽
          </td>
        </tr>
        <tr>
          <td align="right">会员简介</td>
          <td><textarea rows="5" cols="50" v-model="info.desc" /></td>
        </tr>
        <tr>
          <td align="right">是否同意条款</td>
          <td><input type="checkbox" v-model="info.isAgree" />XXX条款</td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-success"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
//路由器对象
const router = useRouter();
//路由信息对象
const route = useRoute();

console.log(route);

//声明一个变量获取增加会员所需的数据
let info: any = reactive({
  id: route.query.id,
  memberCode:
    moment(new Date()).format('YYYYMMDD') +
    Math.random().toString().substring(2, 5),
  tel: '',
  userName: '',
  card: '',
  birthDay: '',
  score: '',
  money: '',
  levelId: '',
  gender: 1,
  likes: [],
  desc: '',
  isAgree: '',
  cardType: '',
});

let arr: any = ref(['身份证', '驾驶证', '军人证', '护照']);

//获取会员等级
//onMounted  相当于文档就绪函数   生命周期钩子函数（12个）

//声明一个变量接受等级列表
let levelList: any = ref([]);

// let data: any = reactive({
//   levelList: [],
// });

onMounted(() => {
  //发送网络请求获取等级列表
  getLevelList();
  getData();
});

//修改的第二件事:返填
const getData = () => {
  axios({
    url: '/api/Members/GetMemberItem',
    method: 'get',
    params: {
      id: route.query.id,
    },
  })
    .then((res) => {
      console.log(res);
      //第一种：
      // info.tel = res.data.tel;
      // info.userName = res.data.userName;
      //....
      //第二种：
      Object.assign(info, res.data);
      info.birthDay = res.data.birthDay.substring(0, 10); //时间返填
      info.likes = res.data.likes.split(','); //将字符串转成数组
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取等级列表;
const getLevelList = () => {
  axios({
    url: '/api/Members/GetMemberList', //等级列表的接口
    method: 'get', //报405请求方式不对
  })
    .then((res) => {
      //res后端返回的数据：数值  数组  字符串 对象。。。
      console.log(res);
      levelList.value = res.data;
      // data.levelList = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//做会员修改
const ok = () => {
  //1.有效性判断
  if (info.tel == '') {
    alert('手机号不能为空');
    return;
  }
  //手机号为正确的手机号
  let reg = /^1[3-9]\d{9}$/;
  if (reg.test(info.tel) == false) {
    alert('手机号不合法');
    return;
  }
  if (info.userName == '') {
    alert('姓名不能为空');
    return;
  }

  if (info.card == '') {
    alert('身份证号码不能为空');
    return;
  }

  let reg1 = /^\d{17}[0-9xX]$/;
  if (reg1.test(info.card) == false) {
    alert('身份证号码不合法');
    return;
  }

  if (info.birthDay == '') {
    alert('生日必填');
    return;
  }

  if (info.score == '') {
    alert('积分不能为空');
    return;
  }

  let reg2 = /^[+]?\d+$/;
  if (reg2.test(info.score) == false) {
    alert('积分只能是正数');
    return;
  }

  if (info.money == '') {
    alert('余额不能为空');
    return;
  }
  if (reg2.test(info.money) == false) {
    alert('余额只能是正数');
    return;
  }
  if (info.levelId == '') {
    alert('等级必选');
    return;
  }
  if (info.likes.length == 0) {
    alert('爱好必选');
    return;
  }
  if (info.desc == '') {
    alert('简介不能为空');
    return;
  }

  let reg3 = /^[\u4e00-\u9fa5]{1,50}$/;
  if (reg3.test(info.desc) == false) {
    alert('只能是50以内的汉字');
    return;
  }

  if (info.isAgree == false) {
    alert('同意条款必选');
    return;
  }
  //2.发送网络请求做增加操作
  info.likes = info.likes.toString();
  axios({
    url: '/api/Members/UpdateMember',
    method: 'put',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        //跳转到会员列表
        router.push('/memberList');
        return;
      }
      if (res.data == -1) {
        alert('手机号重复');
        return;
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
